import { Card, CardContent, CardHeader, CardTitle } from "@poketto/ui/card";
import { Bar, BarChart, Line, LineChart, ResponsiveContainer } from "recharts";

import { useTheme } from "@/components/theme/theme-provider";
import { themes } from "@/hooks/themes";
import { useConfig } from "@/hooks/use-config";

const data = [
	{
		revenue: 10400,
		subscription: 240,
	},
	{
		revenue: 14405,
		subscription: 300,
	},
	{
		revenue: 9400,
		subscription: 200,
	},
	{
		revenue: 8200,
		subscription: 278,
	},
	{
		revenue: 7000,
		subscription: 189,
	},
	{
		revenue: 9600,
		subscription: 239,
	},
	{
		revenue: 11244,
		subscription: 278,
	},
	{
		revenue: 26475,
		subscription: 189,
	},
];

export function CardsStats() {
	const { theme: mode } = useTheme();
	const [config] = useConfig();

	const theme = themes.find((theme) => theme.name === config.theme);

	return (
		<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
			<Card>
				<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
					<CardTitle className="text-sm font-normal">Total Revenue</CardTitle>
				</CardHeader>
				<CardContent>
					<div className="text-2xl font-bold">$15,231.89</div>
					<p className="text-xs text-muted-foreground">
						+20.1% from last month
					</p>
					<div className="h-[80px]">
						<ResponsiveContainer width="100%" height="100%">
							<LineChart
								data={data}
								margin={{
									top: 5,
									right: 10,
									left: 10,
									bottom: 0,
								}}
							>
								<Line
									type="monotone"
									strokeWidth={2}
									dataKey="revenue"
									activeDot={{
										r: 6,
										style: { fill: "var(--theme-primary)", opacity: 0.25 },
									}}
									style={
										{
											stroke: "var(--theme-primary)",
											"--theme-primary": `hsl(${
												theme?.cssVars[mode === "dark" ? "dark" : "light"]
													.primary
											})`,
										} as React.CSSProperties
									}
								/>
							</LineChart>
						</ResponsiveContainer>
					</div>
				</CardContent>
			</Card>
			<Card>
				<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
					<CardTitle className="text-sm font-normal">Subscriptions</CardTitle>
				</CardHeader>
				<CardContent>
					<div className="text-2xl font-bold">+2350</div>
					<p className="text-xs text-muted-foreground">
						+180.1% from last month
					</p>
					<div className="mt-4 h-[80px]">
						<ResponsiveContainer width="100%" height="100%">
							<BarChart data={data}>
								<Bar
									dataKey="subscription"
									style={
										{
											fill: "var(--theme-primary)",
											opacity: 1,
											"--theme-primary": `hsl(${
												theme?.cssVars[mode === "dark" ? "dark" : "light"]
													.primary
											})`,
										} as React.CSSProperties
									}
								/>
							</BarChart>
						</ResponsiveContainer>
					</div>
				</CardContent>
			</Card>
		</div>
	);
}
